<template>
    <div class="grid2">
        <div class="white">
            设置单位：
            <el-radio-group v-model="unit" @change="handleChange">
                <el-radio :value="1" size="small">fr</el-radio>
                <el-radio :value="2" size="small">%</el-radio>
            </el-radio-group>
        </div>
        <div class="white">设置父元素宽度：</div>
        <el-slider class="el_slider" v-model="num" :step="50" :min="200" :max="600"></el-slider>
        <div class="parent" :style="unit === 1 ? { gridTemplateColumns: '1fr 3fr', width: num+'px' }:{ gridTemplateColumns: '25% 75%', width: num+'px' }">
            <div class="child">我是内容文字</div>
            <div class="child">
            </div>
        </div>
    </div>
    
</template>
<script setup>
import { ref } from 'vue'

const num = ref(600)

const unit = ref(1)

const emit = defineEmits(['unitChange'])
const handleChange = (val) => {
    emit('unitChange', val)
}

</script>
<style scoped lang='scss'>
.grid2 {
    display: flex;
    flex-direction: column;
    align-items: center;

    &>div {
        width: 80%;
    }

    .parent {
        display: grid;
        grid-template-columns: 25% 75%;
        gap: 24px;
        height: 60px;
        padding: 12px;
        background-color: #000;

        .child {
            text-align: center;
            white-space: nowrap;
            border: 2px solid #4eb5fa;
        }   
    }
}

</style>